<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-07-14 15:29:24
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-07-21 16:22:31
 * @FilePath: \passiflora-edulis-sims\src\components\GlobalGridComponent.vue
 * @Description: 方框的全局设置
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
-->
<script setup lang="ts">
import type { IStroke } from 'leafer-ui'
import { useGlobalGridStore } from 'src/stores/global-grid-store'
import { computed, reactive, watch } from 'vue'

const global_grid = useGlobalGridStore()
// 方框颜色设置
const gird_stroke_style = reactive({
  type: 'solid',
  color: '#000000',
  style: {
    strokeWidth: 1,
  },
})

// eslint-disable-next-line @typescript-eslint/no-unused-vars
watch(gird_stroke_style, (new_val, _) => {
  global_grid.stroke = new_val as IStroke
})

const width = computed({
  get() {
    return global_grid.width
  },
  set(new_val: number) {
    global_grid.width = new_val
    global_grid.height = new_val
  },
})

const col_token = 'col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-2'
</script>
<template>
  <div>
    <div class="row">
      <div :class="col_token" class="q-pb-sm q-pr-sm">
        <q-input
          v-model.number="width"
          label="方框边长"
          type="number"
          outlined
        />
      </div>
      <div :class="col_token" class="q-pb-sm q-pr-sm">
        <q-input
          v-model.number="gird_stroke_style.style.strokeWidth"
          label="方框厚度(px)"
          type="number"
          outlined
        />
      </div>
      <div :class="col_token" class="q-pb-sm q-pr-sm">
        <div
          class="row justify-between items-center"
          style="
            border: solid rgba(0, 0, 0, 0.24);
            border-radius: 5px;
            border-width: 1px;
            height: 100%;
          "
        >
          <div>
            <q-icon
              name="check_box_outline_blank"
              :style="{ color: gird_stroke_style.color }"
              size="2rem"
            >
            </q-icon>
          </div>
          <div>
            <q-icon name="colorize" size="2rem">
              <q-popup-proxy
                cover
                transition-show="scale"
                transition-hide="scale"
              >
                <q-color v-model="gird_stroke_style.color" />
              </q-popup-proxy>
            </q-icon>
          </div>
        </div>
      </div>
      <div :class="col_token" class="q-pb-sm q-pr-sm">
        <q-input
          v-model.number="global_grid.x_interval"
          label="水平间隔"
          type="number"
          outlined
        />
      </div>
      <div :class="col_token" class="q-pb-sm q-pr-sm">
        <q-input
          v-model.number="global_grid.y_interval"
          label="竖直间隔"
          type="number"
          outlined
        />
      </div>
    </div>
  </div>
</template>
<style lang="sass" scoped></style>
